<template>
	<view
		class="u-circle-progress"
		:style="{
			width: widthPx + 'px',
			height: widthPx + 'px',
			backgroundColor: bgColor
		}"
	>
		<!-- 支付宝小程序不支持canvas-id属性，必须用id属性 -->
		<canvas
			class="u-canvas-bg"
			:canvas-id="elBgId"
			:id="elBgId"
			:style="{
				width: widthPx + 'px',
				height: widthPx + 'px'
			}"
		></canvas>
		<canvas
			class="u-canvas"
			:canvas-id="elId"
			:id="elId"
			:style="{
				width: widthPx + 'px',
				height: widthPx + 'px'
			}"
		></canvas>
		<slot></slot>
	</view>
</template>

<script>

export default {
	name: 'u-circle-progress',
	props: {
		
		percent: {
			type: Number,
			default: 0,
			
			validator: val => {
				return val >= 0 && val <= 100;
			}
		},
		
		inactiveColor: {
			type: String,
			default: '#ececec'
		},
		
		activeColor: {
			type: String,
			default: '#19be6b'
		},
		
		borderWidth: {
			type: [Number, String],
			default: 14
		},
		
		width: {
			type: [Number, String],
			default: 200
		},
		
		duration: {
			type: [Number, String],
			default: 1500
		},
		
		type: {
			type: String,
			default: ''
		},
		
		bgColor: {
			type: String,
			default: '#ffffff'
		}
	},
	data() {
		return {
			// #ifdef MP-WEIXIN
			elBgId: 'uCircleProgressBgId', 
			elId: 'uCircleProgressElId',
			// #endif
			// #ifndef MP-WEIXIN
			elBgId: this.$u.guid(), 
			elId: this.$u.guid(),
			// #endif
			widthPx: uni.upx2px(this.width), 
			borderWidthPx: uni.upx2px(this.borderWidth), 
			startAngle: -Math.PI / 2, 
			progressContext: null, 
			newPercent: 0, 
			oldPercent: 0 
		};
	},
	watch: {
		percent(nVal, oVal = 0) {
			if (nVal > 100) nVal = 100;
			if (nVal < 0) oVal = 0;
			
			this.newPercent = nVal;
			this.oldPercent = oVal;
			setTimeout(() => {
				
				
				this.drawCircleByProgress(oVal);
			}, 50);
		}
	},
	created() {
		
		this.newPercent = this.percent;
		this.oldPercent = 0;
	},
	computed: {
		
		circleColor() {
			if (['success', 'error', 'info', 'primary', 'warning'].indexOf(this.type) >= 0) return this.$u.color[this.type];
			else return this.activeColor;
		}
	},
	mounted() {
		
		setTimeout(() => {
			this.drawProgressBg();
			this.drawCircleByProgress(this.oldPercent);
		}, 50);
	},
	methods: {
		drawProgressBg() {
			let ctx = uni.createCanvasContext(this.elBgId, this);
			ctx.setLineWidth(this.borderWidthPx); 
			ctx.setStrokeStyle(this.inactiveColor); 
			ctx.beginPath(); 
			
			let radius = this.widthPx / 2;
			ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 2 * Math.PI, false);
			ctx.stroke(); 
			ctx.draw();
		},
		drawCircleByProgress(progress) {
			
			let ctx = this.progressContext;
			if (!ctx) {
				ctx = uni.createCanvasContext(this.elId, this);
				this.progressContext = ctx;
			}
			
			ctx.setLineCap('round');
			
			ctx.setLineWidth(this.borderWidthPx);
			ctx.setStrokeStyle(this.circleColor);
			
			let time = Math.floor(this.duration / 100);
			
			
			let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
			ctx.beginPath();
			
			let radius = this.widthPx / 2;
			ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false);
			ctx.stroke();
			ctx.draw();
			
			if (this.newPercent > this.oldPercent) {
				
				progress++;
				
				if (progress > this.newPercent) return;
			} else {
				
				progress--;
				if (progress < this.newPercent) return;
			}
			setTimeout(() => {
				
				this.drawCircleByProgress(progress);
			}, time);
		}
	}
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.u-circle-progress {
	position: relative;
	/* #ifndef APP-NVUE */
	display: inline-flex;		
	/* #endif */
	align-items: center;
	justify-content: center;
}

.u-canvas-bg {
	position: absolute;
}

.u-canvas {
	position: absolute;
}
</style>
